<template>
  <!-- 富文本 -->
  <div>
    <quill-editor
      ref="myQuillEditor"
      v-model="textContent.content"
      :options="editorOption"
      @blur="onEditorBlur()"
      @focus="onEditorFocus()"
      @ready="onEditorReady()"
      @change="onEditorChange()"
    />
    <el-button
      v-if="showSave"
      class="button"
      size="small"
      type="primary"
      @click="handleSendData">
      保存/发布
    </el-button>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// 必须要引入
import * as Quill from "quill";
import { quillEditor } from "vue-quill-editor";
import { ImageDrop } from "quill-image-drop-module"; // 图片拖动组件引用
import ImageResize from "quill-image-resize-module"; // 图片缩放组件引用
Quill.register("modules/imageDrop", ImageDrop); // 注册
Quill.register("modules/imageResize", ImageResize); // 注册
// 自定义文字大小
let fontSize = ['12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px', '32px', '36px']
Quill.imports['attributors/style/size'].whitelist = fontSize;
Quill.register(Quill.imports['attributors/style/size']);

export default {
  name: "custom-quill-editor", // 富文本插件vue-quill-editor
  props: {
    // 导出数据接口
    quillRequest: {
      type: [String],
      default: ''
    },
    content: {
      type: [String],
      default: ''
    },
    showSave: {
      type: Boolean,
      default: false
    },
  },
  components: { quillEditor },
  data() {
    return {
      // 富文本插件数据内容
      textContent: {
        content: "",
        textShow: false,
        id: ''
      },
      editorOption: {
        placeholder: "请输入需要编写的内容...",
        modules: {
          imageDrop: true, //图片拖拽
          imageResize: {
            //放大缩小
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [
              {
                size: fontSize
              },
              // {
              //   size: [
              //     "12px",
              //     "14px",
              //     "16px",
              //     "18px",
              //     "20px",
              //     "22px",
              //     "24px",
              //     "26px",
              //     "28px",
              //     "30px",
              //     "32px",
              //     "36px",
              //   ],
              // },
            ], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["image", "video"], // 链接、图片、视频
          ],
        },
      },
    };
  },
  created() {
    if(!this.showSave){
      this.textContent.content = this.content
    } else {
      this.getQuillEditor();
    }
  },
  methods: {
    // 失去焦点事件
    onEditorBlur() {
      if(!this.showSave) {
        this.$emit('onEditorBlur', this.textContent)
      }
    },
    // 获得焦点事件
    onEditorFocus() {},
    // 准备编辑器
    onEditorReady() {},
    // 内容改变事件
    onEditorChange() {
      if(!this.showSave) {
        this.$emit('onEditorChange', this.textContent)
      }
    },
    //保存按钮点击事件
    handleSendData() {
      if(this.showSave) {
        this.$emit("sendContentData", this.textContent);
      }
    },
    // 获取已有的文本内容
    getContent(e) {
      this.textContent.content = e;
    },
    // 获取文本内容
    getQuillEditor(){
      const vm = this

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      vm.apiUrl[vm.quillRequest]()
        .then(res => {
          const { code, data, msg } = res;
          if (code != 0) {
            vm.$message({
              type: 'error',
              message: msg
            })
          } else {
            // 部门名称
            if(data){
              vm.textContent = {
                ...data
              };
            }
          }
        })
        .catch(err => {
          if(err&&err.isCancel) return
        })
    },
  },
  // watch: {
  //   // 监听文本变化内容
  //   content() {
  //     console.log(this.content);
  //   },
  // },
};
</script>

<style lang="less" scoped>
/* 富文本框汉化 */
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: "12px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "18px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
  content: "22px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
  content: "24px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
  content: "26px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
  content: "28px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
  content: "30px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
  content: "32px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
  content: "36px";
}

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
// 内容主体高度
///deep/ .ql-toolbar.ql-snow + .ql-container.ql-snow{
//  min-height: 500px;
//}
/* 确认按钮 */
.button {
  margin-top: 10px;
}
</style>
